<template>
	<div>
		<div class="zb_index_title">
			<p class="fl">
				资讯推荐
			</p>
			<span class="fr">
				<router-link to="">
					更多资讯
				</router-link>
			</span>
			<div class="clear"></div>
		</div>
		<ul class="news_index_box">
			<li v-for="(item,index) of news" :key="index">
				<router-link :to="item.url">
					<img :src="item.img || '../../../../static/imges/ic_home_news@3x.png'" class="news_img fl" />
					<div class="news_content fr">
						<p>{{item.title}}</p>
						<div class="news_info">
							<span class="number">{{item.number}}人阅读</span>
							<span class="time fr">{{item.time}}</span>
						</div>
					</div>
				</router-link>
				<div class="clear"></div>
			</li>
		</ul>
		
		<p class="bottom">已经到底啦</p>
		
		
	</div>
</template>

<script>
	export default {
		name: 'news',
		props: {
			news: Array
		},
	}
</script>

<style scoped="scoped">
	.news_index_box {
		width: 100%;
	}

	.news_index_box li {
		border-bottom: 1px solid #DDDDDD;
		padding: .3rem 0;
	}

	.news_index_box li .news_img {
		width: 29%;
	}

	.news_index_box li .news_content {
		width: 67%;
		text-align: left;
	}

	.news_index_box li .news_content p {
		font-size: .28rem;
		color: #333;
		line-height: .36rem;
		height: .72rem;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.news_index_box li .news_info {
		margin-top: .26rem;
		color: #666;
	}

	.news_index_box li .news_info span.number {
		background: url(../../../../static/imges/bg_home_eye@2x.png) no-repeat left;
		background-size: .3rem;
		padding-left: .35rem;
	}
	.bottom{
		margin: .3rem auto;
		color: #666;
		font-size: .2rem;
	}
</style>
